<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="docId" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="createdTime" label="时间" width="180">
			</el-table-column>
			<el-table-column prop="hospitalName" label="医院" width="180">
			</el-table-column>
			<el-table-column prop="docType" label="类型">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button 
						@click="showMedicalRecord(scope.row.medicalRecordInfo)" 
						type="primary" 
						size="small"
					>
						查看详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-drawer 
			title="病历详情" 
			:visible.sync="drawer" 
			:direction="direction" 
			:before-close="handleClose"
			size="50%"
		>
			<div class="medical-record-detail">
				<el-descriptions :column="2" border>
					<el-descriptions-item label="患者姓名">{{ currentRecord.patientName || '--' }}</el-descriptions-item>
					<el-descriptions-item label="患者ID">{{ currentRecord.patientId || '--' }}</el-descriptions-item>
					<el-descriptions-item label="就诊科室">{{ currentRecord.deptName || '--' }}</el-descriptions-item>
					<el-descriptions-item label="医生姓名">{{ currentRecord.doctorName || '--' }}</el-descriptions-item>
					<el-descriptions-item label="就诊时间">{{ currentRecord.createdTime || '--' }}</el-descriptions-item>
					<el-descriptions-item label="就诊号">{{ currentRecord.visitId || '--' }}</el-descriptions-item>
				</el-descriptions>
				
				<div class="section">
					<h3>主诉</h3>
					<p>{{ currentRecord.chiefComplaint || '--' }}</p>
				</div>
				
				<div class="section">
					<h3>现病史</h3>
					<p>{{ currentRecord.historyOfPresentIllness || '--' }}</p>
				</div>
				
				<div class="section">
					<h3>既往史</h3>
					<p>{{ currentRecord.pastHistory || '--' }}</p>
				</div>
				
				<div class="section">
					<h3>体格检查</h3>
					<p>{{ currentRecord.physicalExam || '--' }}</p>
				</div>
				
				<div class="section">
					<h3>初步诊断</h3>
					<p>{{ currentRecord.initialDiagnosis || '--' }}</p>
				</div>
				
				<div class="section" v-if="currentRecord.reportResult">
					<h3>报告结果</h3>
					<p>{{ currentRecord.reportResult || '--' }}</p>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import http from "../../utils/request"
	export default {
		data() {
			return {
				drawer: false,
				direction: 'rtl',
				tableData: [],
				currentRecord: {} // 当前选中的病历信息
			};
		},
		async created() {
			try {
				const response = await http.get(
					`/patient/getMedicalRecordList?username=${this.$store.state.user.username}`
				);
				// 确保tableData是数组
				if (response.data && response.data.data) {
					if (Array.isArray(response.data.data)) {
						this.tableData = response.data.data;
					} else if (typeof response.data.data === 'object') {
						// 如果返回的是单个对象，转为数组
						this.tableData = [response.data.data];
					}
				}
			} catch (error) {
				console.error('获取病历列表失败:', error);
				this.$message.error('加载病历列表失败');
			}
		},
		methods: {
			// 显示病历详情
			showMedicalRecord(record) {
				this.currentRecord = record || {};
				this.drawer = true;
			},
			
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.currentRecord = {};
						done();
					})
					.catch(_ => {});
			}
		}
	};
</script>

<style scoped>
.medical-record-detail {
	padding: 20px;
}

.section {
	margin-top: 20px;
	padding: 15px;
	background-color: #f8f9fa;
	border-radius: 4px;
	border-left: 4px solid #409EFF;
}

.section h3 {
	margin-top: 0;
	margin-bottom: 10px;
	color: #303133;
	font-size: 16px;
}

.section p {
	margin: 0;
	color: #606266;
	line-height: 1.6;
	white-space: pre-wrap;
}
</style>